<template>
  <div class="tech-button-demo">
    <h1 class="demo-title">Vue3 科技感大屏按钮组件</h1>
    <p class="demo-subtitle">多种科技风格按钮展示</p>
    
    <div class="button-grid">
      <div class="button-group">
        <h3>基本按钮</h3>
        <TechButton @click="handleClick('Primary')">主要按钮</TechButton>
        <TechButton type="success" @click="handleClick('Success')">成功按钮</TechButton>
        <TechButton type="warning" @click="handleClick('Warning')">警告按钮</TechButton>
        <TechButton type="danger" @click="handleClick('Danger')">危险按钮</TechButton>
        <TechButton type="info" @click="handleClick('Info')">信息按钮</TechButton>
      </div>
      
      <div class="button-group">
        <h3>科技风格按钮</h3>
        <TechButton type="hologram" @click="handleClick('Hologram')">全息投影</TechButton>
        <TechButton type="neon" @click="handleClick('Neon')">霓虹灯</TechButton>
        <TechButton type="metal" @click="handleClick('Metal')">金属质感</TechButton>
        <TechButton type="data" @click="handleClick('Data')">数据流</TechButton>
      </div>
      
      <div class="button-group">
        <h3>新增科技风格</h3>
        <TechButton type="halo" @click="handleClick('Halo')">光晕效果</TechButton>
        <TechButton type="circuit" @click="handleClick('Circuit')">电路板</TechButton>
        <TechButton type="energy-ring" @click="handleClick('EnergyRing')">能量环</TechButton>
        <TechButton type="space" @click="handleClick('Space')">太空</TechButton>
        <TechButton type="city" @click="handleClick('City')">未来城市</TechButton>
      </div>
      
      <div class="button-group">
        <h3>尺寸控制</h3>
        <TechButton size="small" @click="handleClick('Small')">小按钮</TechButton>
        <TechButton size="medium" @click="handleClick('Medium')">中按钮</TechButton>
        <TechButton size="large" @click="handleClick('Large')">大按钮</TechButton>
      </div>
      
      <div class="button-group">
        <h3>状态控制</h3>
        <TechButton :loading="true">加载中</TechButton>
        <TechButton disabled>已禁用</TechButton>
        <TechButton :effect="false">无动效</TechButton>
      </div>
      
      <div class="button-group">
        <h3>带图标按钮</h3>
        <TechButton type="primary" @click="handleClick('Scan')">
          <template #icon>
            <RadarIcon />
          </template>
          开始扫描
        </TechButton>
        <TechButton type="info" size="small" @click="handleClick('Detail')">
          <template #icon>
            <InfoIcon />
          </template>
          查看详情
        </TechButton>
        <TechButton type="data" size="large" @click="handleClick('Analysis')">
          <template #icon>
            <ChartIcon />
          </template>
          数据分析
        </TechButton>
      </div>

      <div class="button-group">
        <h3>纯图标按钮</h3>
        <TechButton type="primary" size="small" @click="handleClick('Home')">
          <template #icon>
            <HomeIcon />
          </template>
        </TechButton>
        <TechButton type="neon" @click="handleClick('Settings')">
          <template #icon>
            <SettingsIcon />
          </template>
        </TechButton>
        <TechButton type="halo" size="large" @click="handleClick('Add')">
          <template #icon>
            <AddIcon />
          </template>
        </TechButton>
      </div>
    </div>
  
    <div class="console">
      <h3>控制台输出</h3>
      <div class="console-content">
        <p v-for="(log, index) in logs" :key="index">{{ log }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
//@ts-ignore
import { CKTechButton as  TechButton } from '@pgh-big-screen/vue-ui';
import RadarIcon from "@examples/assets/svg/radar.svg"
import InfoIcon from "@examples/assets/svg/info.svg"
import ChartIcon from "@examples/assets/svg/chart.svg"
import HomeIcon from "@examples/assets/svg/home.svg"
import SettingsIcon from "@examples/assets/svg/setting.svg"
import AddIcon from "@examples/assets/svg/add.svg"

const logs = ref<string[]>([]);

const handleClick = (type: string) => {
  const message = `点击了 ${type} 按钮`;
  logs.value.unshift(message);
  if (logs.value.length > 10) {
    logs.value.pop();
  }
};
</script>

<style scoped>
.tech-button-demo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  color: #e0e0e0;
  min-height: 100vh;
}

.demo-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 247, 255, 0.7);
  font-family: 'Orbitron', sans-serif;
}

.demo-subtitle {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: #a0a0ff;
  font-family: 'Orbitron', sans-serif;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.button-group {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.button-group h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #00f7ff;
  border-bottom: 1px solid rgba(0, 247, 255, 0.3);
  padding-bottom: 8px;
  font-family: 'Orbitron', sans-serif;
}

.tech-button {
  margin: 8px;
}

.console {
  margin-top: 40px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid rgba(0, 247, 255, 0.2);
}

.console h3 {
  margin-top: 0;
  color: #00f7ff;
  font-family: 'Orbitron', sans-serif;
}

.console-content {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  padding: 15px;
  min-height: 150px;
  max-height: 300px;
  overflow-y: auto;
  font-family: monospace;
  color: #00ffcc;
  border: 1px solid rgba(0, 255, 204, 0.2);
}

.console-content p {
  margin: 5px 0;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(0, 255, 204, 0.1);
}
</style>